<template>
  <div class="container mx-auto">
    <el-table ref="tableRef" row-key="date" :data="tableData" style="width: 100%">
      <el-table-column prop="name" label="姓名" />
      <el-table-column
        prop="tag"
        label="班级"
        :filters="[
          { text: '22软件3班', value: '22软件3班' },
          { text: '22软件1班', value: '22软件1班' },
          { text: '22软件2班', value: '22软件2班' }
        ]"
        :filter-method="filterTag"
        filter-placement="bottom-end"
      >
        <template #default="scope">
          <el-tag :type="scope.row.tag === 'Home' ? '' : 'success'" disable-transitions>{{
            scope.row.tag
          }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="date" label="学号" sortable />
      <el-table-column sortable label="任务统计" class-name="task_statistics">
        <template #header>
          <div class="w-full flex flex-col items-center justify-center">
            <div>任务统计</div>
            <div class="flex h-full gap-2">
              <el-tooltip class="box-item" effect="dark" content="未学" placement="top">
                <div class="flex items-center gap-1">
                  <div class="w-[30px] h-[20px] bg-red-500"></div>
                  <span>未学</span>
                </div>
              </el-tooltip>
              <el-tooltip class="box-item" effect="dark" content="在学" placement="top">
                <div class="flex items-center gap-1">
                  <div class="w-[30px] h-[20px] bg-yellow-500"></div>
                  <span>未学</span>
                </div>
              </el-tooltip>
              <el-tooltip class="box-item" effect="dark" content="已学" placement="top">
                <div class="flex items-center gap-1">
                  <div class="w-[30px] h-[20px] bg-green-500"></div>
                  <span>已学</span>
                </div>
              </el-tooltip>
            </div>
          </div>
        </template>
        <template #default>
          <div class="flex w-full h-[20px]">
            <el-tooltip class="box-item" effect="dark" content="已学任务：1" placement="top">
              <div class="text-center flex-1 min-w-[5%] max-w-[20%] bg-green-500">1</div>
            </el-tooltip>
            <el-tooltip class="box-item" effect="dark" content="在学任务：2" placement="top">
              <div class="text-center flex-1 min-w-[5%] max-w-[40%] bg-yellow-500">2</div>
            </el-tooltip>
            <el-tooltip class="box-item" effect="dark" content="未学任务：2" placement="top">
              <div class="text-center flex-1 min-w-[5%] max-w-[40%] bg-red-500">2</div>
            </el-tooltip>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import type { TableInstance } from 'element-plus'

interface User {
  date: string
  name: string
  unlearned: number
  learning: number
  learned: number
  tag: string
}

const tableRef = ref<TableInstance>()

// const resetDateFilter = () => {
//   tableRef.value!.clearFilter(['date'])
// }
// // TODO: improvement typing when refactor table
// const clearFilter = () => {
//   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
//   // @ts-expect-error
//   tableRef.value!.clearFilter()
// }
// const formatter = (row: User, column: TableColumnCtx<User>) => {
//   return row.address
// }
const filterTag = (value: string, row: User) => {
  return row.tag === value
}
// const filterHandler = (
//   value: string,
//   row: User,
//   column: TableColumnCtx<User>
// ) => {
//   const property = column['property']
//   return row[property] === value
// }

const tableData: User[] = [
  {
    date: '20001054',
    name: '黄显铸',
    unlearned: 1,
    learning: 2,
    learned: 2,
    tag: '22软件3班'
  },
  {
    date: '20001739',
    name: '吴怀民',
    unlearned: 1,
    learning: 2,
    learned: 2,
    tag: '22软件2班'
  },
  {
    date: '20002830',
    name: '冯梓轩',
    unlearned: 1,
    learning: 2,
    learned: 2,
    tag: '22软件1班'
  },
  {
    date: '20005614',
    name: '王生权',
    unlearned: 1,
    learning: 2,
    learned: 2,
    tag: '22软件3班'
  }
]
</script>
<style lang="postcss" scoped>
:deep(.task_statistics .cell) {
  @apply flex items-end;
}
</style>
